<template>
  <div class="region-selector">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-select
            v-model="form.province"
            placeholder="请选择省份"
            clearable
            :disabled="disabled"
            @change="handleProvinceChange"
        >
          <el-option
              v-for="item in provinceOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code"
          />
        </el-select>
      </el-col>

      <el-col :span="8">
        <el-select
            v-model="form.city"
            placeholder="请选择城市"
            clearable
            :disabled="!form.province || disabled"
            @change="handleCityChange"
        >
          <el-option
              v-for="item in cityOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code"
          />
        </el-select>
      </el-col>

      <el-col :span="8">
        <el-select
            v-model="form.area"
            placeholder="请选择区/县"
            clearable
            :disabled="!form.city || disabled"
            @change="handleAreaChange"
        >
          <el-option
              v-for="item in areaOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code"
          />
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { reactive, ref, defineExpose, watchEffect } from 'vue'
import regionData from './map/map.json'

export default {
  name: 'RegionSelector',
  props: {
    modelValue: {
      type: Object,
      default: () => ({
        province: '',
        city: '',
        area: ''
      })
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'change'],
  setup(props, {emit}) {
    // 表单数据
    const form = reactive({
      province: '',
      city: '',
      area: ''
    })

    // 选项数据
    const provinceOptions = ref(regionData)
    const cityOptions = ref([])
    const areaOptions = ref([])

    // 监听外部传入的值变化
    watchEffect(() => {
      if (props.modelValue) {
        form.province = props.modelValue.province || ''
        form.city = props.modelValue.city || ''
        form.area = props.modelValue.area || ''

        // 如果有省份值，加载城市选项
        if (form.province) {
          const province = provinceOptions.value.find(item => item.code === form.province)
          if (province && province.children) {
            cityOptions.value = province.children
          }
        }

        // 如果有城市值，加载区县选项
        if (form.city) {
          const province = provinceOptions.value.find(item => item.code === form.province)
          if (province && province.children) {
            const city = province.children.find(item => item.code === form.city)
            if (city && city.children) {
              areaOptions.value = city.children
            }
          }
        }
      }
    })

    // 处理省份选择变化
    const handleProvinceChange = (value) => {
      form.city = ''
      form.area = ''
      cityOptions.value = []
      areaOptions.value = []

      if (value) {
        const province = provinceOptions.value.find(item => item.code === value)
        if (province && province.children) {
          cityOptions.value = province.children
        }
      }

      emitChange()
    }

    // 处理城市选择变化
    const handleCityChange = (value) => {
      form.area = ''
      areaOptions.value = []

      if (value) {
        const province = provinceOptions.value.find(item => item.code === form.province)
        if (province && province.children) {
          const city = province.children.find(item => item.code === value)
          if (city && city.children) {
            areaOptions.value = city.children
          }
        }
      }

      emitChange()
    }

    // 处理区县选择变化
    const handleAreaChange = () => {
      emitChange()
    }

    // 发送选择变化事件
    const emitChange = () => {
      const result = {
        province: getRegionText(provinceOptions.value, form.province),
        provinceCode: form.province,
        city: getRegionText(cityOptions.value, form.city),
        cityCode: form.city,
        area: getRegionText(areaOptions.value, form.area),
        areaCode: form.area
      }
      emit('update:modelValue', {
        province: form.province,
        city: form.city,
        area: form.area
      })
      emit('change', result)
    }

    // 获取地区文本
    const getRegionText = (options, code) => {
      if (!options || !code) return ''
      const region = options.find(item => item.code === code)
      return region ? region.name : ''
    }

    // 重置方法
    const reset = () => {
      form.province = ''
      form.city = ''
      form.area = ''
      cityOptions.value = []
      areaOptions.value = []
      emitChange()
    }

    // 对外暴露方法
    defineExpose({
      reset
    })

    return {
      form,
      provinceOptions,
      cityOptions,
      areaOptions,
      handleProvinceChange,
      handleCityChange,
      handleAreaChange
    }
  }
}
</script>

<style scoped>
.region-selector {
  width: 100%;
}
</style>